<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <link rel="stylesheet" href="../../css/elementui.css">
    <link rel="stylesheet" href="../../css/user-order.css">
    <link rel="shortcut icon" href="../../img/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="../../css/user-style.css" >
    <!--<link rel="stylesheet" href="../../css/dataTables.bootstrap.css" >-->
</head>

<body>

<div id="app">

    <div id="header">
        <!-- 顶部导航栏 -->
        <nav id="site-nav" role="navigation">
            <div class="workArea">
                <!-- 导航栏左半部分,如果取不到用户信息则显示如下： -->
                <span v-if="!login">
                    <span>喵，欢迎来天猫</span>
                    <span><a href="/pages/login.html">请登录</a></span>
                    <span><a href="/pages/user/regist.html">免费注册</a></span>
                </span>
                <!-- 如果用户成功登录，则显示如下： -->
                <span v-if="login">
                    <span>Hi，{{loginUser.name}}</span>
                    <span><a href="nowhere">积分 <strong>1325</strong></a></span>
                    <span><a href="../login.html">退出</a></span>
                </span>
                <!-- 导航栏右半部分：使用Bootstrap的pull-right类 -->
                <span class="pull-right" v-if="login">
                    <a href="/pages/user/order.html">我的订单</a>
                    <a href="/pages/user/cart.html">
                        <span class="glyphicon glyphicon-shopping-cart redColor"></span>
                        购物车<strong id="cartTotalItemNumber">{{shopNum}}</strong>件
                    </a>
                </span>
            </div>
        </nav>
        <!--搜索框-->
        <div class="header">
            <div class="headerLayout workArea">
                <!-- 图片logo -->
                <div class="logo">
                    <a href="index.html">
                        <img src="../../img/tmall-logo.png">
                    </a>
                </div>
                <!-- 搜索框 -->
                <form class="mallSearch-input" action="/searchProduct">
                    <input name="keyword" type="text" placeholder="搜索 天猫 商品/品牌/店铺">
                    <button type="button" class="searchButton" @click="searchGoods">搜索</button>
                    <ul class="hot-query">
                        <li>
                            <a href="searchProduct?keyword=针织衫">针织衫</a>
                        </li>
                        <li class="hot-query-li">
                            <a href="">连衣裙</a>
                        </li>
                        <li class="hot-query-li">
                            <a href="">四件套</a>
                        </li>
                        <li class="hot-query-li">
                            <a href="">摄像头</a>
                        </li>
                        <li class="hot-query-li">
                            <a href="">客厅灯</a>
                        </li>
                        <li class="hot-query-li">
                            <a href="">口红</a>
                        </li>
                        <li class="hot-query-li">
                            <a href="">手机</a>
                        </li>
                        <li class="hot-query-li">
                            <a href="">运动鞋</a>
                        </li>
                        <li class="hot-query-li">
                            <a href="">牛奶</a>
                        </li>
                    </ul>
                </form>
            </div>
        </div>

        <div style="clear: both;"/>

    </div>

    <div id="main">
        <div class="cartDiv">
            <template>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="全部订单" name="first"></el-tab-pane>
                    <el-tab-pane label="待付款" name="second"></el-tab-pane>
                    <el-tab-pane label="待发货" name="third"></el-tab-pane>
                    <el-tab-pane label="待收货" name="fourth"></el-tab-pane>
                    <el-tab-pane label="待评价" name="five">
                        <div class="cartProductList">
                            <table class="cartProductTable">
                                <thead>
                                <tr>
                                    <th width="120px">商品</th>
                                    <th width="250px">标题</th>
                                    <th>保障</th>
                                    <th width="200px">支付时间</th>
                                    <th>支付金额</th>
                                    <th class="operation">操作</th>
                                </tr>
                                </thead>
                                <tbody v-for="(o,index) in orderData">
                                <!--遍历订单-->
                                <tr class="cartProductItemTR">
                                    <!--主图-->
                                    <td>
                                        <img class="cartProductImg" :src="goodsMainImg[index]">
                                    </td>
                                    <!--标题-->
                                    <td>
                                        <div class="cartProductLinkOutDiv">
                                            <a :href="'/pages/user/goods.html?goodsId='+o.goodsId"
                                               class="cartProductLink">{{goodsDetail[index].titleShow}}</a>
                                            <div class="cartProductLinkInnerDiv">
                                                <img src="../../img/creditcard.png" title="支持信用卡支付">
                                                <img src="../../img/7day.png" title="消费者保障服务,承诺7天退货">
                                                <img src="../../img/promise.png" title="消费者保障服务,承诺如实描述">
                                            </div>
                                        </div>
                                    </td>
                                    <!--保障-->
                                    <td>
                                        <span class="orderItemProductNumber">{{goodsDetail[index].guarantee}}</span>
                                    </td>
                                    <!--时间-->
                                    <td>
                                        <span class="orderItemProductNumber">{{o.createTime}}</span>
                                    </td>
                                    <!--金额-->
                                    <td>
                                        <span class="cartProductItemPromotionPrice">￥{{goodsDetail[index].lowPrice}}</span>
                                    </td>
                                    <!--按钮-->
                                    <td>
                                        <a class="deleteOrderItem" href="#">查看详情</a>
                                    </td>
                                </tr>
                                </el-checkbox>
                                </tbody>
                            </table>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </template>

        </div>

    </div>

    <div id="footer" class="footer" style="display: block;">

        <div class="workArea">
            <div class="tmall-ensure">
                <a href="#nowhere">
                    <img src="../../img/footer1.png">
                    <img src="../../img/footer2.png">
                    <img src="../../img/footer3.png">
                    <img src="../../img/footer4.png">
                </a>
            </div>

            <div class="tmall-desc">
                <dl>
                    <dt><span>购物指南</span></dt>
                    <dd><a href="#nowhere">免费注册</a></dd>
                    <dd><a href="#nowhere">开通支付宝</a></dd>
                    <dd><a href="#nowhere">支付宝充值</a></dd>
                </dl>
                <dl>
                    <dt><span>天猫保障</span></dt>
                    <dd><a href="#nowhere">发票保障</a></dd>
                    <dd><a href="#nowhere">售后规则</a></dd>
                    <dd><a href="#nowhere">缺货赔付</a></dd>
                </dl>
                <dl>
                    <dt><span>支付方式</span></dt>
                    <dd><a href="#nowhere">快捷支付</a></dd>
                    <dd><a href="#nowhere">信用卡</a></dd>
                    <dd><a href="#nowhere">余额宝</a></dd>
                    <dd><a href="#nowhere">蚂蚁花呗</a></dd>
                    <dd><a href="#nowhere">货到付款</a></dd>
                </dl>
                <dl>
                    <dt><span>商家服务</span></dt>
                    <dd><a href="#nowhere">天猫规则</a></dd>
                    <dd><a href="#nowhere">商家入驻</a></dd>
                    <dd><a href="#nowhere">商家中心</a></dd>
                    <dd><a href="#nowhere">天猫智库</a></dd>
                    <dd><a href="#nowhere">物流服务</a></dd>
                    <dd><a href="#nowhere">喵言喵语</a></dd>
                    <dd><a href="#nowhere">运营服务</a></dd>
                </dl>
                <dl>
                    <dt><span>手机天猫</span></dt>
                    <dd><a href="#nowhere"><img src="../../img/qr-code.png"></a></dd>
                </dl>
            </div>

            <div style="clear:both"></div>
        </div>

        <div class="workArea">
            <img src="../../img/tmall-cat.png" class="tmall-cat">
        </div>
        <div class="tmall-copyright">
            <div class="workArea">
                <div class="mui-global-fragment-load">
                    <div class="footer-tmallinfo">
                        <a href="#nowhere" style="padding-left:0px">关于天猫</a>
                        <a href="#nowhere">帮助中心</a>
                        <a href="#nowhere">开放平台</a>
                        <a href="#nowhere">诚聘英才</a>
                        <a href="#nowhere">联系我们</a>
                        <a href="#nowhere">网站合作</a>
                        <a href="#nowhere">法律声明</a>
                        <a href="#nowhere">知识产权</a>
                        <a href="#nowhere">廉正举报</a>
                        <a href="#nowhere">规则意见征集</a>
                    </div>
                    <div class="footer-tmallinfo">
                        <a href="#nowhere" style="padding-left:0px">阿里巴巴集团</a><span class="slash">|</span>
                        <a href="#nowhere">淘宝网</a><span class="slash">|</span>
                        <a href="#nowhere">天猫</a><span class="slash">|</span>
                        <a href="#nowhere">聚划算</a><span class="slash">|</span>
                        <a href="#nowhere">全球速卖通</a><span class="slash">|</span>
                        <a href="#nowhere">阿里巴巴国际交易市场</a><span class="slash">|</span>
                        <a href="#nowhere">1688</a><span class="slash">|</span>
                        <a href="#nowhere">阿里妈妈</a><span class="slash">|</span>
                        <a href="#nowhere">飞猪</a><span class="slash">|</span>
                        <a href="#nowhere">阿里云计算</a><span class="slash">|</span>
                        <a href="#nowhere">AliOS</a><span class="slash">|</span>
                        <a href="#nowhere">阿里通信</a><span class="slash">|</span>
                        <a href="#nowhere">万网</a><span class="slash">|</span>
                        <a href="#nowhere">高德</a><span class="slash">|</span>
                        <a href="#nowhere">UC</a><span class="slash">|</span>
                        <a href="#nowhere">友盟</a><span class="slash">|</span>
                        <a href="#nowhere">虾米</a><span class="slash">|</span>
                        <a href="#nowhere">阿里星球</a><span class="slash">|</span>
                        <a href="#nowhere">来往</a><span class="slash">|</span>
                        <a href="#nowhere">钉钉</a><span class="slash">|</span>
                        <a href="#nowhere">支付宝</a>
                    </div>

                    <div class="footer-copyright">
                        增值电信业务经营许可证：<a href="#nowhere">浙B2-20110446</a>
                        网络文化经营许可证：<a href="#nowhere">浙网文[2015]0295-065号</a>
                        <a href="#nowhere">12318举报</a>
                        <span>互联网违法和不良信息举报电话：0571-81683755 blxxjb@alibaba-inc.com</span>
                        <br/>
                        互联网药品信息服务资质证书编号：<a href="#nowhere">浙-（经营性）-2017-0005</a>
                        <a href="#nowhere"><img src="../../img/police-icon.png">浙公网安备 33010002000120号</a>
                        <span>（浙）网械平台备字[2018]第00002号</span>
                        <div class="copyRightYear">© 2003-2018 TMALL.COM 版权所有</div>
                        <div>
                            <img src="../../img/copyRight1.jpg">
                            <img src="../../img/copyRight2.jpg">
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>
</div>
</body>
<!--jquery文件-->
<script type="text/javascript" src="../../plugins/jquery/jQuery-2.2.3.min.js"></script>
<!-- 引入vue和elementUI所需配置文件 -->
<script src="../../js/vue.js"></script>
<script src="../../js/elementui.js"></script>
<script src="../../js/axios.js"></script>
<!--bootstrap-->
<script src="../../plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- util.js文件 -->
<script type="text/javascript" src="../../js/util.js"></script>
<!-- 页面js文件 -->
<script type="text/javascript" src="../../js/user-order-noevaluate.js"></script>
<!--
<script src="../../js/jquery.dataTables.js"></script>
<script src="../../js/jquery.metisMenu.js"></script>
<script src="../../js/dataTables.bootstrap.js"></script>
<script src="../../js/custom-scripts.js"></script>-->
